
import One from '../components/one'
import DemoWithCode from '../components/DemoWithCode'

import { Button } from '../../../components/index.tsx'
const handlerClick=()=>{
    alert(3);
}


# Hello, world!

``` jsx 
<One />
```

<One />


```jsx
<Button onClick={handlerClick}>提交</Button>
```

<DemoWithCode code_area={()=><div>code.....</div>}>
    <Button onClick={handlerClick}>提交</Button>
</DemoWithCode>


<Button onClick={handlerClick}>提交</Button>

```html render=true
<div style={{ backgroundColor: 'rebeccapurple', padding: '20px', marginTop: '0px' }} />
```

```html
<div style={{ backgroundColor: 'rebeccapurple', padding: '20px', marginTop: '0px' }} />
```

```html live=true
<div style={{ backgroundColor: 'red', padding: '0px' }} />
```
```html 
<div style={{ backgroundColor: 'red', padding: '20px' }} />
```

# Hello, world!

Here’s a Twitter shortcode:

<Tweet tweetId="1116723357410447360" />

<TextGradient>

## Here’s a text gradient shortcode!

</TextGradient>

Here’s a YouTube shortcode:

<YouTube videoId="4fHw4GeW3EU" />